<template>
    <div class="container">
        <!-- 短信模板管理 -->
        <div class="tempManageMain">
            <el-form :inline="true" :model="formData" class="demo-form-inline" size="small">
                <el-form-item label="模板名称">
                    <el-input v-model="formData.tempName" placeholder="请输入模板名称"></el-input>
                </el-form-item>
                <el-form-item label="模板类型">
                    <el-select v-model="formData.tempType" clearable>
                        <el-option label="动态短信模板" value="D"></el-option>
                        <el-option label="静态短信模板" value="S"></el-option>
                    </el-select>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    :loading="searchLoading"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    :loading="resetLoading"
                >重 置</el-button>
            </el-form>
            <div style="margin-bottom: 16px;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-plus-outline"
                    @click="hanlePush"
                >新增</el-button>
            </div>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="模板名称" prop>
                    <template slot-scope="scope">
                        <span
                            class="text_a"
                            @click="showTempContent(scope.row)"
                        >{{scope.row.tempName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.tempType === 'D'">动态短信模板</span>
                        <span v-else-if="scope.row.tempType === 'S'">静态短信模板</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.businessTypeNo | getStatusTxt(BUSINESSLIST)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.stat === '1'">停用</span>
                        <span v-else-if="scope.row.stat === '0'">启用</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" prop="createDate"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            :disabled="scope.row.stat === '0'"
                            circle
                            title="编辑"
                            @click="handleEdit(scope.row)"
                        />
                        <el-button
                            type="primary"
                            icon="el-icon-check"
                            v-if="scope.row.stat === '1'"
                            circle
                            title="启用"
                            @click="handleStart(scope.row)"
                        />
                        <el-button
                            type="primary"
                            icon="el-icon-circle-close"
                            v-if="scope.row.stat === '0'"
                            circle
                            title="停用"
                            @click="handleStop(scope.row)"
                        />
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            :disabled="scope.row.stat === '0'"
                            circle
                            title="删除"
                            @click="handleDelete(scope.row)"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="1000px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模板类型" prop="tempType" style="margin-bottom: 20px;">
                            <el-select v-model="Edit.tempType" clearable @change="changeTempType">
                                <el-option label="动态短信模板" value="D"></el-option>
                                <el-option label="静态短信模板" value="S"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="业务类型" style="margin-bottom: 20px;">
                            <el-select v-model="Edit.businessTypeNo" clearable>
                                <el-option
                                    v-for="item in BUSINESSLIST"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div
                    style="color: red;margin-bottom: 20px;text-align: center;"
                    v-if="flag === 'D'"
                >提示：双击蓝色短信标识，将插入到光标所在处短信内容不能超过500个字符，短信模板的长度不代表短信的长度</div>
                <div style="color: red;margin-bottom: 20px;text-align: center;" v-if="flag === 'S'">
                    <p>提示：短信内容不能超过500个字符</p>
                </div>
                <el-row>
                    <el-col :span="12" id="grid-content" v-if="flag === 'D'">
                        <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                            <el-row
                                v-for="item in MESSAGETAGSLIST"
                                :key="item.id"
                                style="line-height: 22px;border-bottom: 1px solid #E4E7ED;"
                            >
                                <el-col
                                    :span="10"
                                    style="border-right: 1px solid #E4E7ED;color: #409EFF;cursor: pointer;"
                                >
                                    <div @dblclick="getTempContent(item.code)">{{item.code}}</div>
                                </el-col>
                                <el-col :span="14" style="padding-left: 12px;">{{item.label}}</el-col>
                            </el-row>
                        </el-scrollbar>
                    </el-col>
                    <el-col :span="12" style="height: 350px;text-align: right;">
                        <el-form-item label="模板名称" prop="tempName">
                            <el-input
                                v-model="Edit.tempName"
                                placeholder="请输入"
                                style="width: 250px;"
                            />
                        </el-form-item>
                        <el-form-item label="模板内容" prop="tempContent">
                            <el-input
                                type="textarea"
                                id="tempCon"
                                v-model="Edit.tempContent"
                                style="width: 250px;"
                                placeholder="请输入"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="showTempContentDialog"
            append-to-body
            center
            width="700px"
        >
            <div slot="title">短信模板详情</div>
            <el-form label-width="110px" size="small">
                <el-form-item label="模板名称">
                    <el-input v-model="rowObj.tempName" disabled />
                </el-form-item>
                <el-form-item label="模板内容">
                    <el-input type="textarea" rows="6" v-model="rowObj.tempContent" disabled />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import { RegConfig } from '@/utils/RegConfig';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'MessageTempManagement',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                tempName: '',
                tempType: '',
            },
            // 新增用户字段
            Edit: {
                tempName: null,
                tempContent: null,
                tempType: 'D',
                businessTypeNo: null,
            },
            EditTitle: '',
            Show: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                tempName: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                tempContent: [
                    { required: true, message: '请输入模板内容', trigger: 'change' },
                    { max: 500, message: '模板内容最多为500个字符', trigger: 'change' },
                ],
                tempType: [
                    { required: true, message: '请选择模板类型', trigger: 'change' },
                ],
                businessTypeNo: [
                    { required: true, message: '请选择业务类型', trigger: 'change' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            BUSINESSLIST: [],
            MESSAGETAGSLIST: [],
            showTempContentDialog: false,
            rowObj: {},
            flag: 'D',
        };
    },
    filters: {
        getStatusTxt(txt, data) {
            let text = '';
            data.forEach((item) => {
                if (item.code === txt) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    async mounted() {
        this.getInitData(this.formData);
        // 获取业务类型下拉选择列表
        //this.getBaseData({ dictValue: '短信业务类别' }, 'BUSINESSLIST');
        this.BUSINESSLIST = await getDictSelectList('BUSINESSLIST', this);
        console.log("BUSINESSLIST", this.BUSINESSLIST);
        // 短信标识
        //this.getBaseData({ dictValue: 'MESSAGETAGS' }, 'MESSAGETAGSLIST');
        this.MESSAGETAGSLIST = await getDictSelectList('MESSAGETAGSLIST', this);
        console.log("MESSAGETAGSLIST", this.MESSAGETAGSLIST);
    },
    methods: {
        // 获取业务类型下拉选择列表
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                this[target] = res.data.content;
            });
        },
        // 点击短信模板名称展示模板内容
        showTempContent(row) {
            this.showTempContentDialog = true;
            this.rowObj = row;
        },
        // 双击蓝色短信标识
        getTempContent(code) {
            const str = `<_${code}_>`;
            document.getElementById('tempCon').value += str;
            document.getElementById('tempCon').focus();
        },
        // 切换模板类型展示不同的页面
        changeTempType(val) {
            this.flag = val;
        },
        // 获取短信模板表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.Template.searchByTbMsgTemplate(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.recordList;
                        this.total = res.data.content.recordCount;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                tempName: '',
                tempType: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击新增
        hanlePush() {
            this.EditTitle = '添加模板';
            this.Show = true;
            this.Edit = {};
            document.getElementById('tempCon') !== null ? document.getElementById('tempCon').value = null : '';
            this.Edit.tempType = 'D';
            this.changeTempType(this.Edit.tempType);
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.EditTitle = '修改模板';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.changeTempType(this.Edit.tempType);
            this.Show = true;
            document.getElementById('tempCon') !== null ? document.getElementById('tempCon').value = this.Edit.tempContent : '';
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 启用
        handleStart(row) {
            const params = Object.assign({}, row, { stat: '0' });
            this.$confirm('确认启用该模板？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.Template.updateTbMsgTemplate(params)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('启用成功！');
                                this.getInitData(this.formData);
                                this.Show = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 停用
        handleStop(row) {
            const params = Object.assign({}, row, { stat: '1' });
            this.$confirm('确认停用该模板？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.Template.updateTbMsgTemplate(params)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('停用成功！');
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 删除
        handleDelete(row) {
            this.$confirm('确认删除该模板？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.Template.deleteTbMsgTemplate({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增短信模板点击确定按钮
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.Template.updateTbMsgTemplate(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    document.getElementById('tempCon').value = null;
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.Template.addTbMsgTemplate(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.getInitData(this.formData);
                                    document.getElementById('tempCon').value = null;
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
    },
};
</script>

<style  lang="scss">
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 350px;
    min-height: 350px;
}
#tempCon {
    height: 290px;
}
.container {
    width: 100%;
    height: 100%;
    .tempManageMain {
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
